<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>鼠标移动表格变色</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				text-align: center;
			}
			
			.box1 {
				width: 500px;
				margin: 150px auto;
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 500px;
			}
			
			th {
				background-color: #0099CC;
				color: #FFFFFF;
				border: 1px solid #D0D0D0;
				padding: 10px;
			}
			
			td {
				border: 1px solid #D0D0D0;
				padding: 10px;
			}
		</style>
		<script>
			window.onload = function() {
				var tbody = document.getElementById("mou");
				var tarr = tbody.children;
				for (var i = 0; i < tarr.length; i++) {
					if (i % 2 !== 0) {
						tarr[i].style.backgroundColor = "#a3a3a3";
					} else {
						tarr[i].style.backgroundColor = "#CCC";
					}
					var color = "";
					tarr[i].onmouseover = function() {
						color = this.style.backgroundColor;
						this.style.backgroundColor = "#FFF";
					}
					tarr[i].onmouseout = function() {
						this.style.backgroundColor = color;
					}
				}
			}
		</script>

	</head>

	<body>
		<div class="box1">
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>课程</th>
						<th>成绩</th>
					</tr>
				</thead>
				<tbody id="mou">
					<tr>
						<td>1</td>
						<td>吕不韦</td>
						<td>语文</td>
						<td>100</td>
					</tr>
					<tr>
						<td>2</td>
						<td>吕布</td>
						<td>语文</td>
						<td>100</td>
					</tr>
					<tr>
						<td>3</td>
						<td>吕蒙</td>
						<td>数学</td>
						<td>100</td>
					</tr>
					<tr>
						<td>4</td>
						<td>吕尚</td>
						<td>数学</td>
						<td>100</td>
					</tr>
					<tr>
						<td>5</td>
						<td>吕超</td>
						<td>体育</td>
						<td>100</td>
					</tr>
					<tr>
						<td>6</td>
						<td>吕雉</td>
						<td>物理</td>
						<td>100</td>
					</tr>

				</tbody>
			</table>
		</div>

	</body>

</html>